const RecentQuestion = ({ questions = [] }) => {
  return (
    <div className="space-y-4">
      {questions.map((question, index) => (
        <div
          key={index}
          className="p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 border border-gray-100"
        >
          <div className="flex items-start gap-4">
            {/* 用户头像 */}
            <img
              src={question.avatar}
              alt="用户头像"
              className="w-10 h-10 rounded-full object-cover border-2 border-white shadow-sm"
            />

            {/* 主要内容区域 */}
            <div className="flex-1">
              {/* 标题和用户信息 */}
              <div className="flex items-baseline justify-between gap-2 mb-2">
                <h4 className="text-lg font-semibold text-gray-800">
                  {question.title}
                </h4>
                <span className="text-sm text-gray-500">
                  {new Date(question.updateTime).toLocaleDateString()}
                </span>
              </div>

              {/* 用户信息行 */}
              <div className="mb-3 flex items-center gap-2">
                <span className="text-sm font-medium text-blue-600">
                  {question.username}
                </span>
              </div>

              {/* 问题内容 */}
              <p className="text-gray-600 text-sm leading-relaxed line-clamp-2">
                {question.content}
              </p>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default RecentQuestion;
